<template>
  <div class="app-box" id="qrcode-page">
    <div class="qrcode-box" v-show="!showRefresh">
      <svg style="width:100%;height:20px;" id="barcode"></svg>
      <div id="container" class="container"></div>
      <div>有效时间{{countdownValue}}秒</div>
    </div>
    <div id="refresh-box" v-show="showRefresh">
      <img @click="reCreateOrder" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523554073889&di=857c9187278a01f8989cdfed6393c1df&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1511%2F30%2F7258023_5_thumb.jpg" v-bind:style="{height:rfImgHeight+'px',width:'100%'}">
      <div>二维码已失效，请点击图片刷新</div>
    </div>
    <div id="qrcode-footer">请向商户展示二维码</div>
  </div>
</template>
<script>
// import { searchOrderServlet } from '@/api/testjk'
import { getDetailLFQCreateOrderServlet, searchOrderServlet } from '@/api/apply'
var JsBarcode = require('jsbarcode')
var jq = window.jQuery
var innerWidth = window.innerWidth > 400 ? 400 : window.innerWidth
var searchStatusHandle
export default {
  data() {
    return {
      countdownValue: '',
      showRefresh: false,
      open_id: '',
      payCode: '',
      sceneId: '',
      card_6th: '',
      lastTime: '', // 生成二维码时间
      rfImgHeight: 200
    }
  },
  created() {},
  mounted() {
    this.getquerys()
    this.createJsbarcode()
    this.makeQrcode()
    this.setRefrechImgHeight()
  },

  methods: {
    // 取参数
    getquerys() {
      this.card_6th = this.$route.query.card_6th
      this.payCode = this.$route.query.payCode
      this.open_id = this.$route.query.openid
      this.sceneId = this.$route.query.sceneId
      debugger
    },
    // 刷新 重新生成该订单
    reCreateOrder() {
      sessionStorage.clear()
      var param = {
        open_id: this.open_id,
        serial_no: this.payCode,
        card_6th: this.card_6th,
        lat: '1.00',
        lng: '1.00',
        servlet_type: 'recreate_order'
      }

      getDetailLFQCreateOrderServlet(param).then(pmsg => {
        debugger
        var msg = pmsg.data
        var erromsg = '重新生成付款码失败'
        if (pmsg.error_response != undefined) {
          erromsg = pmsg.error_response.sub_msg
        }
        if (pmsg.lft_orderinfo_response && pmsg.lft_orderinfo_response.resp_code != '0000') {
          erromsg = pmsg.lft_orderinfo_response.resp_msg
        }
        if (erromsg != '') {
          this.$vux.alert.show({
            title: '提示',
            content: erromsg
          })
          return
        }
        if (msg.lft_orderinfo_response.resp_code == '0000') { // 如果成功
          this.showRefresh = false
          this.payCode = msg.lft_orderinfo_response.serial_no
          this.createJsbarcode()
          this.makeQrcode()
        } else {
          debugger
          if (msg.lft_orderinfo_response.resp_msg) {
            erromsg = msg.lft_orderinfo_response.resp_msg
          } else {
            erromsg = '重新生成付款码失败'
          }
          this.$vux.alert.show({
            title: '提示',
            content: erromsg
          })
        }
      })
    },
    // 生成条形码
    createJsbarcode() {
      debugger
      JsBarcode('#barcode', this.payCode, { width: 1.5 })
    },
    // 更新二维码
    makeQrcode() {
      var options = {
        background: '#ffffff',
        ecLevel: 'H',
        fill: '#333333',
        fontcolor: '#ff9818',
        fontname: 'Ubuntu',
        label: '',
        mPosX: 0.5,
        mPosY: 0.5,
        mSize: 0.11,
        minVersion: 6,
        mode: 2,
        quiet: 1,
        radius: 0.1,
        render: 'canvas',
        size: innerWidth * 0.6,
        text: this.payCode
      }
      debugger
      jq('#container').empty().qrcode(options)
      this.lastTime = new Date().getTime()
      this.countdownValue = 120
      searchStatusHandle = setInterval(this.searchOrderStatus, 3000)
      this.countdownTime()
    },
    // 120倒计时
    countdownTime() {
      var _scountdownValue = sessionStorage.getItem('countdownValue')
      if (_scountdownValue && _scountdownValue != 'NaN') {
        this.countdownValue = sessionStorage.getItem('countdownValue')
      } else {
        this.countdownValue = 120
      }
      var _lastcountdownValue = this.countdownValue
      var sihadle = setInterval(() => {
        var nowTime = new Date().getTime()
        var cTimes = Math.floor((nowTime - this.lastTime) / 1000)
        this.countdownValue = _lastcountdownValue - cTimes
        if (this.countdownValue < 0) {
          this.countdownValue = 0
        }
        if (this.countdownValue == 0) {
          this.showRefresh = true
          clearInterval(sihadle)
          clearInterval(searchStatusHandle)
        }
        sessionStorage.setItem('countdownValue', this.countdownValue)
      }, 1000)
    },
    //
    // 每3秒查询扫码结果
    searchOrderStatus() {
      debugger
      var param = {
        open_id: this.open_id,
        serial_no: this.payCode,
        nowTime: new Date().getTime()
      }
      searchOrderServlet(param).then(sodata => {
        console.log('searchOrderServletsearchOrderServlet...')
        console.dir(sodata)
        let data = sodata.data
        /* this.$router.push({ path: '/tradeResult', query: { openid: this.open_id, sceneId: this.sceneId, serial_no: this.payCode, resultCode: '03' } })
         */
        if (data.msg == "03") {
          this.$router.push({ path: '/tradeResult', query: { openid: this.open_id, sceneId: this.sceneId, serial_no: this.payCode, resultCode: '03' } })
        } else if (data.msg == "04") { // 订单已存在
          this.$router.push({ path: '/tradeResult', query: { openid: this.open_id, sceneId: this.sceneId, serial_no: this.payCode, resultCode: '04' } })
        } else if (data.msg == "99") { // 交易失败
          this.$router.push({ path: '/tradeResult', query: { openid: this.open_id, sceneId: this.sceneId, serial_no: this.payCode, resultCode: '99' } })

        } else if (data.msg == "订单不存在") { // 订单不存在
          this.$router.push({ path: '/tradeResult', query: { openid: this.open_id, sceneId: this.sceneId, serial_no: this.payCode, resultCode: '101' } })
        } else if (data.msg == "微信号解密错误") { // 微信号解密错误
          this.$router.push({ path: '/tradeResult', query: { openid: this.open_id, sceneId: this.sceneId, serial_no: this.payCode, resultCode: '102' } })
        } else if (data.msg != "01") { // 其它错误原因
          clearInterval(searchStatusHandle);
          sessionStorage.clear();
          this.$router.push({ path: '/tradeResult', query: { openid: this.open_id, sceneId: this.sceneId, serial_no: this.payCode, resultCode: '199' } })
        }
        if (data.msg != "01") {
          clearInterval(searchStatusHandle);
          sessionStorage.clear();
        }
      }).catch(error => {
        throw error
      })
    },
    // 设置图片的高
    setRefrechImgHeight() {
      setTimeout(() => {
        if (!this.showRefresh) {
          this.rfImgHeight = document.getElementById('barcode').clientHeight + document.getElementById('container').clientHeight
        }
      }, 4000)
    }
  }
}

</script>
<style lang="less">
#qrcode-page {
  padding-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
  height: 100%;
  text-align: center;
  background-color: #1070b9;
  .qrcode-box {
    background-color: #fff;
    padding: 30px;
    text-align: center;
    #container {}
  }
  #refresh-box {
    background-color: #fff;
    padding: 30px;
  }
  #qrcode-footer {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.6);
  }
}

</style>
